<template>
  <CallBack />
  <div class="constitution-view">
    <!-- 全局加载组件 -->
    <LoadingOverlay />
    <div class="constitution-container">
      <!-- 状态显示区域 -->
      <div class="health-status-area">
        <!-- 1. 显示到期时间 (优先级最高) -->
        <div v-if="priceSetting.month_time" class="status-block expiry-time">
          <span class="status-icon">⏱️</span>
          <span class="status-text">{{ t('your_month_card_will_expire_in') }} {{ priceSetting.month_time }} {{ t('days') }}</span>
        </div>

        <!-- 2. 显示免费次数 -->
        <div v-else-if="priceSetting.free_nums > 0" class="status-block free-count">
          <span class="status-icon">🎁</span>
          <span class="status-text">{{ t('you_have') }} {{ priceSetting.free_nums }} {{ t('free_consultation_opportunities') }}</span>
        </div>

        <!-- 3. 显示次卡剩余次数 -->
        <div v-else-if="priceSetting.once_nums > 0" class="status-block usage-count">
          <span class="status-icon">🎫</span>
          <span class="status-text">{{ t('your_once_card_still_has') }} {{ priceSetting.once_nums }} {{ t('usage_opportunities') }}</span>
        </div>

        <!-- 4. 显示充值按钮 -->
        <div v-else class="status-block payment-options">
          <div class="payment-title">{{ t('please_select_payment_method') }}</div>
          <div class="payment-buttons">
            <el-space wrap>
              <button class="payment-button once-card" @click="handleRechargeClick('once')">{{ t('recharge_once_card') }}</button>
              <button class="payment-button month-card" @click="handleRechargeClick('month')" v-if="map.month_key">{{ t('recharge_month_card') }}</button>
            </el-space>
          </div>
        </div>
      </div>
      <h3 class="constitution-section-title">— {{ t('constitution_query') }} —</h3>
      <div class="constitution-form">
        <!-- 出生年月日 -->
        <div class="constitution-form-item">
          <label><span class="required-star">*</span>{{ t('birth_date') }}:</label>
          <el-date-picker v-model="constitutionData.birthDate" type="date" :placeholder="t('please_select_birth_date')"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="disabledDate"
            class="constitution-date-picker" />
        </div>

        <!-- 出生时间段 -->
        <div class="constitution-form-item">
          <label>{{ t('birth_time') }}:</label>
          <el-select v-model="constitutionData.birthTime"
            class="constitution-select">
            <el-option v-for="(time, index) in birthTimeOptions" :key="index" :label="time" :value="index" />
          </el-select>
        </div>

        <!-- 生活十年以上的省份 -->
        <div class="constitution-form-item">
          <label><span class="required-star">*</span>{{ t('birth_place') }}:</label>
          <el-select v-model="constitutionData.birthPlace" :placeholder="t('please_select_birth_place')"
            class="constitution-select">
            <el-option v-for="(province, index) in birthPlaceOptions" :key="index" :label="province"
              :value="province" />
          </el-select>
        </div>

        <!-- 是否预测未来症状发展 -->
        <div class="constitution-form-item">
          <el-checkbox v-model="constitutionData.predictFuture">
            {{ t('predict_future_symptoms') }}
          </el-checkbox>
        </div>
      </div>

      <!-- 查询结果 -->
      <div v-if="showResult" class="constitution-result">
        <div class="result-title">{{ t('query_result') }}</div>
        <div class="result-content">
          <!-- 使用共通化的打字机效果组件 -->
          <TypewriterText :parsedResult="parsedResult" :displayedText="displayedText" :currentSection="currentSection"
            :currentElement="currentElement" :isTyping="isTyping" :showResult="showResult" />
        </div>
      </div>

      <!-- 提交按钮 -->
      <div class="constitution-submit" v-if="priceSetting.free_nums > 0 || priceSetting.once_nums > 0 || priceSetting.month_time">
        <button class="submit-button" @click="submitConstitutionQuery"
          :disabled="!constitutionData.birthDate || !constitutionData.birthPlace">
          {{ t('submit_consultation') }}
        </button>
      </div>

      <!-- 支付对话框组件 -->
      <PaymentDialog ref="paymentDialog" :packageInfo="currentPackage" @success="handlePaymentSuccess"
        @cancel="handlePaymentCancel" @error="handlePaymentError" />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed, watch } from 'vue';
import { getTizhiSearch } from '@/api/constitution';
import LoadingOverlay from '@/components/common/LoadingOverlay.vue';
import TypewriterText from '@/components/common/TypewriterText.vue';
import PaymentDialog from '@/components/common/PaymentDialog.vue';
import { ElMessage } from 'element-plus';
import { useTypewriter } from '@/hooks/useTypewriter';
import { getUserCombo } from '@/api/chat';
import { useLoadingStore } from '@/store/loadingStore';
import { useLanguageStore } from '@/store/languageStore';
import useLogin from '@/hooks/useLogin';
import { useUserStore } from '@/store/userStore';
import CallBack from '@/components/common/CallBack.vue';
import { useTeamType } from '@/hooks/useTeamType';
import { useRoute } from 'vue-router';

const { toogleLoginModal } = useLogin()
const { t } = useLanguageStore(); 
const userStore = useUserStore();
const route = useRoute();
const teamType = useTeamType();
const constitutionCategoryId = ref(route.query.categoryId || 17); // 默认体质查询分类ID

const map = teamType.getMapStr(constitutionCategoryId.value);

const priceSetting = reactive({
  free_nums: 0,   //免费次数
  oncepay: 0,     //次卡费用
  monpay: 0,      //月卡费用
  once_nums: 0,   //次卡次数
  month_time: 0,  //月卡到期日期
});
// 体质查询相关数据
const constitutionData = reactive({
  birthDate: '',
  birthTime: 0,
  birthPlace: '',
  predictFuture: false
});

// 使用打字机效果hook
const {
  parsedResult,
  displayedText,
  currentSection,
  currentElement,
  isTyping,
  showResult,
  setResultData,
  startTypingEffect,
  resetTypewriter
} = useTypewriter();

// 五运六气数据
const wuyunLiuqiData = ref(null);

// 使用加载状态store
const loadingStore = useLoadingStore();
const free_nums = ref(0);
// 出生时间段选项
const birthTimeOptions = computed(() => {
  return [
  t('please_select_birth_time'), // 默认选项
  t('time_option1'),
  t('time_option2'),
  t('time_option3'),
  t('time_option4'),
  t('time_option5'),
  t('time_option6'),
  t('time_option7'),
  t('time_option8'),
  t('time_option9'),
  t('time_option10'),
  t('time_option11'),
  t('time_option12')
];
});

// 省份选项
const birthPlaceOptions = computed(() => {
  return [
  t('province_option1'), 
  t('province_option2'), 
  t('province_option3'), 
  t('province_option4'), 
  t('province_option5'), 
  t('province_option6'), 
  t('province_option7'), 
  t('province_option8'), 
  t('province_option9'), 
  t('province_option10'), 
  t('province_option11'), 
  t('province_option12'), 
  t('province_option13'), 
  t('province_option14'), 
  t('province_option15'), 
  t('province_option16'), 
  t('province_option17'), 
  t('province_option18'), 
  t('province_option19'), 
  t('province_option20'), 
  t('province_option21'), 
  t('province_option22'), 
  t('province_option23'), 
  t('province_option24'), 
  t('province_option25'), 
  t('province_option26'), 
  t('province_option27'), 
  t('province_option28'), 
  t('province_option29'), 
  t('province_option30'), 
  t('province_option31'), 
  t('province_option32'), 
  t('province_option33'), 
  t('province_option34'), 
];
});


// 禁用未来日期
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};

// 提交体质查询
const submitConstitutionQuery = async () => {
  const isLoggedIn = toogleLoginModal();
  if (!isLoggedIn) return;
  if (!constitutionData.birthDate) {
    ElMessage.warning(t('please_select_birth_date'));
    return;
  }

  if (!constitutionData.birthPlace) {
    ElMessage.warning(t('please_select_birth_place'));
    return;
  }

  try {
    // 显示加载状态 - 使用共通化的加载状态
    loadingStore.startLoading(t('querying_constitution_info'));

    // 重置打字机效果
    resetTypewriter();

    // 格式化日期为 YYYY-MM-DD 格式
    const formattedDate = constitutionData.birthDate;

    // 准备请求参数，参考微信小程序的 gotoPredict 函数
    const requestData = {
      isPredict: constitutionData.predictFuture, // 是否预测未来
      user_phone: '', // PC端可以不传手机号
      type: 1,
      date: formattedDate,
      birthTime: constitutionData.birthTime === 0 ? 0 : constitutionData.birthTime, // 如果选择了默认选项(索引0)，传0
      birthPlace: constitutionData.birthPlace,
      usedDay: 0 // PC端可以不传或设为0
    };

    // 调用封装好的体质查询接口
    const response = await getTizhiSearch(requestData);

    if (response.code !== 0) {
      throw new Error(response.msg || t('query_failed'));
    }
    // 关闭Loading状态
    loadingStore.endLoading();
    // 提取五运六气数据
    if (response.data.wuyun_liuqi && response.data.wuyun_liuqi.success) {
      wuyunLiuqiData.value = response.data.wuyun_liuqi;
    }
    // 解构返回的数据，参考微信小程序的处理方式
    const { year_end, zodiac, month_day, animal_ill, birth_place_description, detail_time } = response.data;

    // 构建结果文本，类似微信小程序中的处理
    let responseText = `${t('query_sucdess_title')}`;


     // 拼接五运六气信息到结果文本
    if (wuyunLiuqiData.value) {
      const wuyun = wuyunLiuqiData.value;
      let wuyunText = '\n\n【五运六气信息】\n';
      
      // 拼接天干地支年份和年份类型
      if (wuyun.ganzhi_cn && wuyun.year_type) {
        wuyunText += `干支年份：${wuyun.ganzhi_cn}（${wuyun.year_type}）\n`;
      }
      
      // 拼接基础气候
      if (wuyun.jichu_qihou) {
        wuyunText += `基础气候：${wuyun.jichu_qihou}\n`;
      }
      
      // 拼接饮食调理
      if (wuyun.yinshi_tiaoli) {
        wuyunText += `饮食调理：${wuyun.yinshi_tiaoli}\n`;
      }
      
      // 拼接当前年份是否为特殊年份
      if (wuyun.special_info && wuyun.special_info.is_special) {
        wuyunText += `\n【当前年份】\n`;
        wuyunText += `${wuyun.special_info.ganzhi}年 - ${wuyun.special_info.description}\n`;
      }
      
      // 拼接该地支类型下所有特殊年份
      if (wuyun.all_special_years && wuyun.all_special_years.length > 0) {
        wuyunText += `\n【该属相所有特殊年份】\n`;
        wuyun.all_special_years.forEach(item => {
          wuyunText += `${item.full_text}\n`;
        });
      }
      
      // 拼接该属相的所有时段信息
      if (wuyun.all_periods && wuyun.all_periods.length > 0) {
        wuyunText += `\n【分时段(阳历)健康影响与调理】\n`;
        wuyun.all_periods.forEach((period) => {
          // 格式化日期显示
          const startDate = period.start.replace('-', '月') + '日';
          const endDate = period.end.replace('-', '月') + '日';
          
          wuyunText += `${startDate}-${endDate}左右 | `;
          
          // 主气和客气
          if (period.zhuqi && period.keqi) {
            wuyunText += `主气${period.zhuqi}+客气${period.keqi}`;
          }
          
          // 气候特点
          if (period.qihou) {
            wuyunText += `(${period.qihou})`;
          }
          
          wuyunText += `\n`;
          
          // 健康影响
          if (period.desc) {
            wuyunText += `健康影响：${period.desc}\n`;
          }
          
          wuyunText += `\n`;
        });
      }
      
      // 添加通用规律
      if (wuyun.tongyong_guilu) {
        wuyunText += `${wuyun.tongyong_guilu}`;
      }
      
      // 添加到结果文本
      if (wuyunText.trim()) {
        responseText += wuyunText;
      }
    }
    // 收集所有非空字段到数组中
    const fields = [];
    if (year_end) fields.push(`- ${year_end}`);
    if (zodiac) fields.push(`- ${zodiac}`);
    if (month_day) fields.push(`- ${month_day}`);
    if (animal_ill) fields.push(`- ${animal_ill}`);
    if (birth_place_description) fields.push(`- ${birth_place_description}`);
    if (detail_time) fields.push(`- ${detail_time}`);

    // 只有存在字段时才添加换行，并用换行符连接所有字段
    if (fields.length > 0) {
      responseText += '\n' + fields.join('\n');
    }

   

    // 处理预测结果
    let predictResults = [];
    if (response.data.predict_res &&
      response.data.predict_res.predictRes &&
      typeof response.data.predict_res.predictRes === "object") {

      predictResults = response.data.predict_res.predictRes.map(item => {
        // 收集年份相关的信息
        const yearInfo = [];

        // 添加年份标题
        if (item.predict_year) {
          yearInfo.push(`${item.predict_year}${t('year')}`);
        }

        // 拼接五运六气信息（只添加非空项）
        const yearDetails = [item.five_yun, item.six_qi, item.six_tizhi, item.tizhi_and_tiangan]
          .filter(Boolean)
          .join(' ');

        if (yearDetails) {
          yearInfo.push(yearDetails);
        }

        // 处理 month 对象
        const monthLines = [];
        if (item.month && typeof item.month === "object" && !Array.isArray(item.month)) {
          // 遍历 month 对象的键值对，只添加非空值
          Object.entries(item.month).forEach(([key, value]) => {
            if (value) {
              monthLines.push(`--${key}${t('month')}： ${value}`);
            }
          });
        }

        // 合并年份信息和月份信息
        const allLines = [...yearInfo, ...monthLines];

        // 返回每个对象的结果，只在有内容时用换行符连接
        return allLines.length > 0 ? allLines.join('\n') : '';
      }).filter(Boolean); // 过滤掉空字符串
    }

    // 构建结果数据结构，用于打字机效果显示
    const resultData = [
      {
        title: t('query_result'),
        paragraphs: [responseText]
      }
    ];

    // 如果有详细的预测结果，可以添加更多的结构化数据
    if (predictResults.length > 0) {
      resultData.push({
        title: t('detail_prediction'),
        paragraphs: predictResults
      });
    }

    // 设置结果数据并开始打字机效果
    // 传入一个返回原文本的函数,禁用高亮效果
    setResultData(resultData);
    await startTypingEffect(50, 30, 500, 200, (text) => text);



    // 显示成功消息
    ElMessage.success(t('query_success'));
  } catch (error) {
    console.error('体质查询失败:', error);
    ElMessage.error(error.message || t('query_failed'));
    loadingStore.endLoading();
  }
};
// 打字机效果相关函数已移至 useTypewriter hook 中

// 支付相关
const paymentDialog = ref(null);
const hasFreeQueries = ref(false);
const currentPackage = ref({
  type: 'physical_once_mums',
  name: t('tizhi_once'),
  price: 99 // 默认价格
});
// 获取用户资费卡信息
const getUserCardInfo = async () => {
  try {
    const response = await getUserCombo();
    if (response.code === 0) {
      priceSetting.oncepay = map.once_key ? response.data[map.once_key] : '';
      priceSetting.monpay = map.month_key ? response.data[map.month_key] : '';
      priceSetting.once_nums = map.nums_key ? response.data[map.nums_key] : '';
      priceSetting.month_time = map.time_key ? response.data[map.time_key] : '';
      priceSetting.free_nums = response.data.free_nums;
      
      // 更新套餐价格
      if (priceSetting.oncepay) {
        currentPackage.value.price = priceSetting.oncepay;
      }
    } else {
      console.error('获取资费卡信息失败:', response.msg);
    }
  } catch (error) {
    console.error('获取资费卡信息出错:', error);
  }
};

watch(() => userStore.isLoggedIn, () => {
  if (userStore.isLoggedIn) {
    getUserCardInfo();
  }
})

// 处理充值点击
const handleRechargeClick = (type) => {
  let categoryName = t('constitution_query');

  // 根据当前分类和充值类型设置套餐信息
  if (type === 'once') {
    currentPackage.value = {
      type: map.nums_key || 'once',
      name: `${categoryName} ${t('once_card')}`,
      price: priceSetting.oncepay || 99
    };
  } else if (type === 'month') {
    currentPackage.value = {
      type: map.month_key || 'month',
      name: `${categoryName} ${t('month_card')}`,
      price: priceSetting.monpay || 199
    };
  }

  // 打开支付对话框
  paymentDialog.value.showPayment();
};

// 支付成功回调
const handlePaymentSuccess = async () => {
  ElMessage.success(t('payment_success'));
  await getUserCardInfo(); // 刷新用户资费卡信息
};
// 支付取消回调
const handlePaymentCancel = () => {
  ElMessage.info(t('payment_cancel'));
};

// 支付错误回调
const handlePaymentError = (error) => {
  ElMessage.error(t('payment_error') + (error?.message || ''));
};

// 初始化时获取用户资费卡信息
onMounted(async () => {
  await getUserCardInfo();
});
</script>

<style lang="less" scoped>
/* 体质查询视图样式 */
.constitution-view {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100%;

}

.constitution-container {
  flex: 1;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.constitution-section-title {
  text-align: center;
  margin-bottom: 30px;
  color: #3f51b5;
  font-weight: 600;
  font-size: 20px;
}

.constitution-form {
  margin-bottom: 30px;
}

.constitution-form-item {
  margin-bottom: 20px;
}

.constitution-form-item label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #333333;
}

.required-star {
  color: #ff4757;
  margin-right: 4px;
  font-weight: bold;
}

.constitution-date-picker,
.constitution-select {
  width: 100%;
}

.constitution-submit {
  text-align: center;
  margin-top: 30px;
}

.submit-button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #3f51b5 0%, #5c6bc0 100%);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(63, 81, 181, 0.3);
}

.submit-button:hover {
  background: linear-gradient(135deg, #3949ab 0%, #5c6bc0 100%);
  box-shadow: 0 4px 10px rgba(63, 81, 181, 0.4);
  transform: translateY(-1px);
}

.submit-button:disabled {
  background: linear-gradient(135deg, #9fa8da 0%, #b3b8d3 100%);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 查询结果样式 */
.constitution-result {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #d0d9ff;
  border-radius: 8px;
  background-color: #f8f9ff;
  box-shadow: 0 2px 10px rgba(63, 81, 181, 0.1);
}

.result-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #3f51b5;
  text-align: center;
}

.result-content {
  line-height: 1.6;
  color: #333333;
}

.result-section {
  margin-bottom: 20px;
}

.result-section h4 {
  margin-bottom: 10px;
  color: #3f51b5;
  font-weight: 600;
}

.result-section p {
  margin-bottom: 8px;
}

.result-section strong {
  color: #e91e63;
  font-weight: 600;
}

/* 打字机效果样式 */
.typing {
  border-right: 2px solid transparent;
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: #3f51b5;
  animation: cursor-blink 0.8s infinite;
  vertical-align: middle;
  margin-left: 2px;
}

@keyframes cursor-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* 覆盖 Element Plus 默认样式 */
:deep(.el-checkbox__label) {
  color: #333333;
}

:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #c0caf5 inset;
}

:deep(.el-input__inner) {
  color: #333333;
}

:deep(.el-select-dropdown) {
  background-color: #ffffff;
  border: 1px solid #c0caf5;
}

:deep(.el-select-dropdown__item) {
  color: #333333;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background-color: #f0f3ff;
}

:deep(.el-select-dropdown__item.selected) {
  color: #3f51b5;
  background-color: #e8eaf6;
}

:deep(.el-date-editor) {
  --el-datepicker-border-color: #c0caf5;
  --el-datepicker-inner-border-color: #c0caf5;
  --el-datepicker-inrange-bg-color: #e8eaf6;
  --el-datepicker-inrange-hover-bg-color: #e8eaf6;
  --el-datepicker-active-color: #3f51b5;
  --el-text-color-regular: #333333;
  background-color: #ffffff;
}

/* 自定义加载框样式 */
.custom-loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(63, 81, 181, 0.2);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-spinner {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.custom-spinner div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3f51b5;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.custom-spinner div:nth-child(1) {
  left: 6px;
  animation: custom-spinner1 0.6s infinite;
}

.custom-spinner div:nth-child(2) {
  left: 6px;
  animation: custom-spinner2 0.6s infinite;
}

.custom-spinner div:nth-child(3) {
  left: 26px;
  animation: custom-spinner2 0.6s infinite;
}

.custom-spinner div:nth-child(4) {
  left: 45px;
  animation: custom-spinner3 0.6s infinite;
}

@keyframes custom-spinner1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes custom-spinner3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes custom-spinner2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(19px, 0);
  }
}

.custom-loading-text {
  margin-top: 16px;
  color: white;
  font-size: 16px;
}

.health-status-area {
  margin: 20px 0;
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.free-count {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
}

/* 五运六气结果样式 */
.wuyun-liuqi-result {
  margin-top: 30px;
  padding: 20px;
  border: 2px solid #5c6bc0;
  border-radius: 8px;
  background: linear-gradient(135deg, #f5f7ff 0%, #e8eaf6 100%);
  box-shadow: 0 4px 15px rgba(95, 107, 192, 0.15);
}

.wuyun-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #3f51b5;
  text-align: center;
  letter-spacing: 1px;
}

.wuyun-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.wuyun-item {
  display: flex;
  flex-direction: column;
  padding: 12px 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-left: 4px solid #5c6bc0;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.wuyun-item:hover {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(95, 107, 192, 0.1);
  transform: translateX(2px);
}

.wuyun-label {
  font-weight: 600;
  color: #3f51b5;
  margin-bottom: 6px;
  font-size: 14px;
}

.wuyun-value {
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.wuyun-value.special {
  color: #e91e63;
  font-weight: 600;
  background-color: #fce4ec;
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-block;
}

@media (max-width: 768px) {
  .wuyun-liuqi-result {
    padding: 15px;
    margin-top: 20px;
  }
  
  .wuyun-title {
    font-size: 16px;
    margin-bottom: 15px;
  }
  
  .wuyun-item {
    padding: 10px 12px;
  }
  
  .wuyun-label {
    font-size: 13px;
  }
  
  .wuyun-value {
    font-size: 13px;
  }
}
</style>
